<template>
    <div class="large-box">
        <div class="top">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <strong>统计管理</strong>
                </el-breadcrumb-item>
                <el-breadcrumb-item>监控大屏</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div id="screenMain" class="main" @mouseenter="mouseEnterFun" @mouseleave="mouseOutFun">
            <BorderBox8 duration="5" title="波波星球实时监控大屏" backgroundColor="rgb(40, 44, 52)">
                <el-icon class="full-screen-icon" v-if="isShowFullScreenIcon && !isFillScreen" color="white" @click="clickFullScreenFun"><FullScreen /></el-icon>
                <el-icon class="setting-icon" v-if="isShowFullScreenIcon && !isFillScreen" color="white" @click="clickSettingFun"><Setting /></el-icon>
                <div class="top">
                    <div class="left">
                        <LeftTopCom/>
                    </div>
                    <div class="middle">
                        <LargeMiddleMap/>
                    </div>
                    <div class="right">
                        <span style="height:25px;line-height:25px">大屏实时箭筒数据</span>
                    </div>
                </div>
                <div class="bottom">
                    <div class="left">

                    </div>
                    <div class="right">

                    </div>
                </div>
            </BorderBox8>
        </div>
    </div>
</template>

<script setup>
import { BorderBox8 } from '@dataview/datav-vue3'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import DynamicTime from './DynamicTime.vue'
import LargeMiddleMap from './LargeMiddleMap.vue'
import LeftTopCom from './LeftTopCom.vue'
const isShowFullScreenIcon=ref(false)
const isFillScreen=ref(false)

// 鼠标移入函数
const mouseEnterFun = ()=>{
    isShowFullScreenIcon.value = true
}
// 鼠标移出函数
const mouseOutFun = ()=>{
    isShowFullScreenIcon.value = false
}
// 全屏函数
const clickFullScreenFun=()=>{
    var docElm = document.getElementById('screenMain');
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
    else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
    }
    isFillScreen.value = true
    isShowFullScreenIcon.value=false
    fullListen()
}
// 退出全屏 手动调用
const exitFullscreen = ()=>{
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}
// 全屏事件监听
const fullListen = () =>{
    let screen = document.getElementById("screenMain")
    if(screen.requestFullscreen){
        screen.addEventListener('fullscreenchange', ()=>{
            if (getFullscreenElement() == null) {
                isShowFullScreenIcon.value = true
                isFillScreen.value = false
            }else {
                //todo
            }
        })
    }
}
// 获取全屏状态
const getFullscreenElement = () => {
    return (
        document['fullscreenElement'] ||
        document['mozFullScreenElement'] ||
        document['msFullScreenElement'] ||
        document['webkitFullscreenElement'] || null
    );
}
// 配置
const clickSettingFun = ()=>{
    ElMessage.success("成功")
}
</script>

<style lang="less" src='../../assets/css/largeScreen.less' scoped></style>